import React, { useEffect } from "react";
import E from "wangeditor";
import { IFormComponentProps } from "@/types/course";
import { getBase64 } from "@/utils/tools";
import AV from "leancloud-storage";
export default function RichText(props: any) {
  console.log("富文本", props);
  useEffect(() => {
    // console.log("富文本useEffect");
    const editor = new E("#rich-cont");
    //失焦事件
    editor.config.onblur = function (newHtml: string) {
      console.log("onblur", newHtml); // 获取最新的 html 内容
      props.onChange(newHtml); //让表单获取到富文本内容
    };
    // 配置菜单栏，设置不需要的菜单
    editor.config.excludeMenus = ["code", "video"];
    //自定义图片上传
    editor.config.customUploadImg = function (
      resultFiles: any,
      insertImgFn: any
    ) {
      // resultFiles 是 input 中选中的文件列表
      // insertImgFn 是获取图片 url 后，插入到编辑器的方法
      // console.log(resultFiles);
      getBase64(resultFiles[0], (base64) => {
        // console.log(base64);
        new AV.File("rich.png", { base64 }).save().then((res: any) => {
          // console.log(res);
          let { url } = res.attributes;
          insertImgFn(url);
        });
      });

      // 上传图片，返回结果，将图片插入到编辑器中
      // insertImgFn(imgUrl)
    };
    editor.create();

    editor.txt.html(props.value);
    return () => {
      //在此useEffect下次调用之前调用
      // console.log("userEffect返回函数");
      editor.destroy(); //解决编辑器反复初始化的报错
    };
  }, [props.value]);
  return <div id="rich-cont"></div>;
}
